<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-menu"></i> 首页</el-breadcrumb-item>
        <el-breadcrumb-item>产品管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="handle-box">
      <el-form ref="serch" :model="serch" :inline="true">
        <el-form-item label="产品类型">
          <el-select v-model="serch.protype" size="small" placeholder="产品类型" class="handle-select mr10">
            <el-option
              v-for="item in searchDic"
              :key="item.id"
              :label="item.dicname"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input v-model="serch.productname" size="small" placeholder="产品名称关键字" class="handle-input mr10"></el-input>
        </el-form-item>
        <el-form-item label="是否店长推荐">
          <el-radio-group v-model="serch.ishot" placeholder="是否店长推荐" class="handle-select mr10">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="doSearch" plain round>搜索</el-button>
          <el-button type="danger" icon="el-icon-delete" size="small" @click="doClean" plain round>清空</el-button>
          <el-button type="success" class="handle-del mr10" size="small" round icon="el-icon-plus"
                     @click="addOrEdit('add',null)" plain>添加
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="page.list" stripe :height=500 style="width: 100%">
      <el-table-column prop="productname" header-align="center" label="产品名称" sortable>
      </el-table-column>
      <el-table-column prop="productxlname" header-align="center" label="产品别名">
      </el-table-column>
      <el-table-column header-align="center" label="分类">
        <template slot-scope="scope">
          <el-tag>{{scope.row.protype}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="burden" header-align="center" label="配料">
      </el-table-column>
      <el-table-column prop="specifications" header-align="center" label="规格">
      </el-table-column>
      <el-table-column prop="scnum" header-align="center" label="生产许可证编号">
      </el-table-column>
      <el-table-column prop="prostnum" header-align="center" label="产品标准号">
      </el-table-column>
      <el-table-column prop="quality" header-align="center" label="保质期">
      </el-table-column>
      <!--<el-table-column prop="productbrief" header-align="center" label="产品简介">
      </el-table-column>-->
      <el-table-column prop="oldprice" header-align="center" label="原价">
      </el-table-column>
      <el-table-column prop="newprice" header-align="center" label="现价">
      </el-table-column>
      <el-table-column prop="ishot" header-align="center" label="是否店长推荐">
        <template scope="scope">
          <el-tag type="success" v-if="scope.row.ishot===0">是</el-tag>
          <el-tag type="error" v-else>否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="hotnum" header-align="center" label="推荐排序">
      </el-table-column>
      <el-table-column prop="odr" header-align="center" label="排序">
      </el-table-column>
      <el-table-column prop="deleted" header-align="center" label="是否删除">
        <template scope="scope">
          <el-tag type="success" v-if="scope.row.deleted===0">正常</el-tag>
          <el-tag type="error" v-else>已删除</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="remark" header-align="center" label="备注" :formatter="strLength">
        <template scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.remark" placement="top-start">
            <span>{{scope.row.remark | handleStrLength(10)}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="操作" header-align="center" width="290">
        <template scope="scope">
          <el-button size="small" type="primary" icon="el-icon-edit"
                     @click="addOrEdit('update', scope.row)" round plain>编辑
          </el-button>
          <el-button size="small" type="danger" icon="el-icon-delete"
                     @click="handleDelete(scope.$index, scope.row)" round plain>删除
          </el-button>
          <router-link :to="{path:'/attachmentRelation',query:{recordId:scope.row.id,modularFlag:2}}">
            <el-button type="success" class="handle-del mr10" size="small" icon="el-icon-upload" round plain> 附件管理
            </el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page.pageNum"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes:="[10, 20, 30,40, 50,100]"
        :total="page.total">
      </el-pagination>
    </div>

    <el-dialog
      title="编辑产品信息"
      :visible.sync="centerDialogVisible"
      width="50%"
      top="25px"
      :before-close="dailogClose" center>
      <el-form :model="product" :rules="rules" ref="product" label-width="120px" class="demo-ruleForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品名称" prop="productname">
              <el-input v-model="product.productname"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品别名" prop="productxlname">
              <el-input v-model="product.productxlname"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="分类" prop="protype">
              <el-select style="width: 100%" v-model.number="product.protype" placeholder="请选择">
                <el-option
                  v-for="item in dic"
                  :key="item.id"
                  :label="item.dicname"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生产许可证编号" prop="scnum">
              <el-input v-model="product.scnum"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="规格" prop="specifications">
              <el-input v-model="product.specifications"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品标准号" prop="prostnum">
              <el-input v-model="product.prostnum"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="原价" prop="oldprice">
              <el-input v-model="product.oldprice"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="现价" prop="newprice">
              <el-input v-model="product.newprice"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="配料" prop="burden">
            <el-input v-model="product.burden"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否店长推荐" prop="ishot">
              <el-switch
                v-model="product.ishot"
                active-text="是"
                inactive-text="否"
                :active-value="0"
                :inactive-value="1"
                node-key="id"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="推荐排序" prop="hotnum">
              <el-input v-model.number="product.hotnum"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="保质期" prop="quality">
              <el-input v-model="product.quality"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序" prop="odr">
              <el-input v-model.number="product.odr"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="产品简介" prop="productbrief">
          <el-input v-model="product.productbrief"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="product.remark" :row="5"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dailogClose">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import common from '../../../common/constant.js'
  import {handleStrLength} from '../../../common/filter'
  import ElFormItem from "../../../../node_modules/element-ui/packages/form/src/form-item";
  import ElCol from "element-ui/packages/col/src/col";
  import ElTag from "../../../../node_modules/element-ui/packages/tag/src/tag";
  export default {
    components: {
      ElTag,
      ElCol,
      ElFormItem
    },
    data() {
      return {
        centerDialogVisible: false,
        url: '../../../static/vuetable.json',
        tableData: [],
        cur_page: 1,
        multipleSelection: [],
        select_cate: '',
        select_word: '',
        products: [],
        page: {
          pageNum: 1,
          pageSize: 10,
          size: 2,
          orderBy: null,
          startRow: 3,
          endRow: 4,
          total: 4,
          pages: 2,
          list: [],
          firstPage: 1,
          prePage: 1,
          nextPage: 0,
          lastPage: 2,
          isFirstPage: false,
          isLastPage: true,
          hasPreviousPage: true,
          hasNextPage: false,
          navigatePages: 8,
          navigatepageNums: [
            1,
            2
          ]
        },
        serch: {
          productname: null,
          protype: null,
          ishot: 0
        },
        product: {
          id: 0,
          productname: '',//商品名称
          productxlname: '',//商品别名
          protype: '',//分类
          burden: '',// 配料
          specifications: '',//规格
          scnum: '',//生产许可证编号
          prostnum: '',//产品标准号
          quality: '',//保质期
          productbrief: '',//产品简介
          ishot: '',//是否店长推荐
          hotnum: 0,//推荐排序,
          odr: 0,//排序
          deleted: 0,//是否删除
          remark: '',//备注
          oldprice: '',
          newprice: ''
        },
        dic: [{
          id: '',
          dicname: ''
        }],
        searchDic: [{
          id: 0,
          dicname: ''
        }],
        rules: {
          productname: [
            {required: true, message: '请填写产品名称', trigger: 'blur'},
            {min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur'}
          ],
          productxlname: [
            {required: true, message: '请填写产品别名', trigger: 'blur'},
            {min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur'}
          ],
          protype: [
            {required: true, type: 'number', message: '请选择产品分类', trigger: 'blur'},
          ],
          odr: [
            {type: 'number', message: '排序值必须为数字值', trigger: 'change'}
          ],
          hotNum: [
            {type: 'number', message: '排序值必须为数字值', trigger: 'change'}
          ],
          scnum: [
            {required: true, message: '请填写生产许可证编号', trigger: 'blur'},
            {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
          ],
          oldprice: [
            {min: 0, max: 10, message: '最多10个字符', trigger: 'blur'}
          ],
          newprice: [
            {min: 0, max: 10, message: '最多10个字符', trigger: 'blur'}
          ]
        }
      }
    },
    created(){
      this.query();
      this.queryDic()
    },
    methods: {
      handleSizeChange(value){
        this.page.pageSize = value
        this.query()
      },
      handleCurrentChange(val) {
        let self = this
        self.page.currentPage = val
        self.query()
      },
      doSearch(){
        this.query()
      },
      doClean(){
        this.serch = {
          productname: null,
          protype: null,
          ishot: 0
        }
        this.query()
      },
      dailogClose(){
        this.centerDialogVisible = false
        this.$refs['product'].resetFields()
        this.product = {
          id: null,
          productname: '',//商品名称
          productxlname: '',//商品别名
          protype: '',//分类
          burden: '',// 配料
          specifications: '',//规格
          scnum: '',//生产许可证编号
          prostnum: '',//产品标准号
          quality: '',//保质期
          productbrief: '',//产品简介
          ishot: 0,//是否店长推荐
          hotNum: 0,//推荐排序,
          odr: 0,//排序
          deleted: 0,//是否删除
          remark: '',//备注
          oldprice: '',
          newprice: ''
        }
      },
      addOrEdit(action, row){
        let self = this
        self.centerDialogVisible = true
        if (action === 'update') {
          self.$http.get('/api/product/one/' + row.id)
            .then((response) => {
              let responseData = response.data
              if (responseData.flag === common.respons.seccuss) {
                self.product = responseData.data
                self.product.protype = parseInt(self.product.protype)
              } else {
                self.message_error()
              }
            })
            .catch(function (response) {
              self.message_error()
            })
        }
      },
      save(){
        let self = this
        self.$refs['product'].validate((valid) => {
          if (valid) {
            self.$http.post('/api/product/save', self.product)
              .then((response) => {
                let responseData = response.data
                if (responseData.flag === common.respons.seccuss) {
                  self.centerDialogVisible = false
                  self.message_ok('编辑产品成功鸟！')
                  self.dailogClose()
                  self.query()
                } else {
                  self.message_error()
                }
              })
              .catch(function (response) {
                self.message_error()
              })

          } else {
            return false
          }
        })
      },
      query(){
        let self = this
        self.$http.post('/api/product', {
          'id': self.product.id,
          'productname': self.serch.productname,
          'protype': self.serch.protype,
          'ishot': self.serch.ishot,
          'pageSize': self.page.pageSize,
          'pageNum': self.page.pageNum,
          'deleted': common.recordStatus.normal
        })
          .then((response) => {
            let responseData = response.data
            if (responseData.flag === common.respons.seccuss) {
              self.page = responseData.pageData
            } else {
              self.message_error()
            }
          })
          .catch(function (response) {
            self.message_error()
          })
      },
      queryDic(){
        let self = this
        self.$http.post('/api/dict', {
          'pageSize': self.page.pageSize,
          'pageNum': self.page.currentPage,
        })
          .then((response) => {
            let responseData = response.data
            if (responseData.flag === common.respons.seccuss) {
              self.dic = responseData.pageData.list
              self.searchDic = responseData.pageData.list
            } else {
              self.message_error()
            }
          })
          .catch(function (response) {
            self.message_error()
          })
      },
      filterTag(value, row) {
        return row.tag === value;
      },
      handleEdit(index, row) {
        this.$message('编辑第' + (index + 1) + '行');
      },
      handleDelete(index, row) {
        let self = this
        self.$alert('注意，删除后不能恢复，确认删除？', '标题名称', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          callback: action => {
            self.$http.get('/api/product/del/' + row.id)
              .then((response) => {
                let responseData = response.data
                if (responseData.flag === common.respons.seccuss) {
                  self.message_ok('删除产品成功！')
                  self.query()
                } else {
                  self.message_error()
                }
              })
              .catch(function (response) {
                self.message_error()
              })
          }
        });
      },
      handleSelectionChange: function (val) {
        this.multipleSelection = val;
      },
      strLength(value){
        if (!value) {
          return ''
        }
        let remark = value.remark
        if (remark === undefined || remark === '') {
          return ''
        }
        return remark.substr(0, 15) + '....'
      },
      message_error(message) {
        this.$notify.error({
          title: '错误',
          message: message === undefined ? '操作失败' : message
        });
      },
      message_ok(message) {
        this.$notify({
          title: '成功',
          message: message === undefined ? '操作成功' : message,
          type: 'success'
        });
      }
    }
  }
</script>

<style scoped>

</style>
